<template>
	<div class="classify-song-list">
		<div class="song-list-bd skeleton" v-if="songList.length == 0">
			<div class="list-content">
				<el-row>
					<el-col
						:xs="6"
						:sm="6"
						:md="6"
						:lg="4"
						v-for="(item, index) of 16"
						:key="index"
					>
						<div class="item">
							<div class="img">
								<svg
									viewBox="0 0 1098 1024"
									xmlns="http://www.w3.org/2000/svg"
									class="ant-skeleton-image-svg"
								>
									<path
										d="M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z"
										class="ant-skeleton-image-path"
									></path>
								</svg>
							</div>
							<div class="intro"></div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<div class="song-list-bd" v-else>
			<div class="list-content">
				<el-row>
					<el-col
						:xs="6"
						:sm="6"
						:md="6"
						:lg="4"
						v-for="item of songList"
						:key="item.specialid"
					>
						<div
							class="item"
							@click="targetSongListDetails(item.specialid)"
						>
							<div class="img">
								<img :src="item.imgurl" />
								<div class="fill-screen">
									<i>&#xe627;</i>
								</div>
							</div>
							<div class="intro">{{ item.specialname }}</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			special_tag_id: sessionStorage.getItem("special_tag_id"),
			songList: [],
		};
	},
	methods: {
		// 获取歌单
		getSongList() {
			this.axios
				.get(
					`/api-classify-song-list/?plat=0&page=1&tagid=${this.special_tag_id}&pagesize=30&ugc=1&id=76&sort=2`
				)
				.then((res) => {
					res.data.data.info.forEach((item) => {
						item.imgurl = item.imgurl.replace(/\/{size}/, "");
					});
					this.songList = res.data.data.info;
				});
		},
		// 跳转到歌单详情页面
		targetSongListDetails(specialid) {
			sessionStorage.setItem("specialid", specialid);
			this.$router.push(`/songListDetails/${specialid}`);
		},
	},
	mounted() {
		this.getSongList();
	},
};
</script>
<style lang="scss">
.classify-song-list {
	// 骨架屏 start
	.skeleton {
		.item {
			padding: 10px 0;
			.img {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 90%;
				// background-color: #f2f2f2;
				animation: 1.4s skeleton-loading ease infinite;
				background: linear-gradient(
					90deg,
					hsla(0, 0%, 74.5%, 0.2) 25%,
					hsla(0, 0%, 50.6%, 0.24) 37%,
					hsla(0, 0%, 74.5%, 0.2) 63%
				);
				background-size: 400% 100%;
				svg {
					width: 60%;
					padding: 22% 0;
				}
				.ant-skeleton-image-path {
					fill: #bfbfbf;
				}
			}
			.intro {
				width: 90%;
				height: 20px;
				animation: 1.4s skeleton-loading ease infinite;
				background: linear-gradient(
					90deg,
					hsla(0, 0%, 74.5%, 0.2) 25%,
					hsla(0, 0%, 50.6%, 0.24) 37%,
					hsla(0, 0%, 74.5%, 0.2) 63%
				);
				background-size: 400% 100%;
			}
		}
	}
	// 骨架屏 end

	// 歌单页面身体 start
	.song-list-bd {
		margin-top: 30px;
		.list-content {
			.el-row {
				display: flex;
				flex-wrap: wrap;
				.el-col {
					margin-bottom: 20px;
					.item {
						width: 100%;
						height: 100%;
						cursor: pointer;
						.img {
							overflow: hidden;
							position: relative;
							width: 90%;
							border-radius: 10px;
							img {
								width: 100%;
								height: 100%;
							}
							.fill-screen {
								display: none;
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
								background-color: rgba(0, 0, 0, 0.4);
								i {
									position: absolute;
									top: calc(50% - 25px);
									left: calc(50% - 25px);
									font-family: "iconfont";
									color: #fff;
									font-size: 50px;
									&:hover {
										color: #5192fe;
									}
								}
							}
							&:hover {
								.fill-screen {
									display: block;
								}
							}
						}
						.intro {
							width: 90%;
							line-height: 20px;
							margin-top: 10px;
							display: -webkit-box;
							overflow: hidden;
							text-overflow: ellipsis;
							text-overflow: -o-ellipsis-lastline;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							font-size: 14px;
							cursor: pointer;
							color: #333;
							&:hover {
								color: #5192fe;
							}
						}
					}
				}
			}
		}
	}
	// 歌单页面身体 end

	@keyframes skeleton-loading {
		0% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0 50%;
		}
	}
}
</style>
